<template>
    <el-skeleton :loading="loading" animated :count="num">
        <template #template>
            <div class="item_play">
                <el-skeleton-item class="ske-img" variant="image" />
                <div class="ske-info">
                    <el-skeleton-item variant="h3" class="ske-name" />
                    <div class="ske-tags">
                        <el-skeleton-item variant="text" />
                        <el-skeleton-item variant="text" />
                        <el-skeleton-item variant="text" />
                    </div>
                </div>
            </div>
        </template>
        <template #default v-if="is_true">
            <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
                <el-tab-pane :label="item.name" :name="item.name" v-for="item in tagList">
                    <div class="playlist">
                        <div class="item_play" v-for="item in playList" :key="item.id">
                            <a href="#" class="faceImg_play">
                                <el-image :src="item.coverImgUrl">
                                    <template #placeholder>
                                        <div class="image-slot">
                                            <i class="iconfont icon-placeholder"></i>
                                        </div>
                                    </template>
                                </el-image>
                                <span class="playCount"><i class="iconfont icon-playnum"></i><em>{{
                                $utils.formartNum(item.playCount)
                                }}</em> / {{ item.trackCount + '首' }}</span>
                            </a>
                            <div class="info">
                                <span style="-webkit-line-clamp: 1;" class="info_name">{{ item.name }}</span>
                                <div class="tags">
                                    <a style="text-decoration:none;" href="#" v-for="(tag, index) in item.tags"
                                        :key="index" class="tag">#{{ tag }}</a>
                                </div>
                            </div>
                        </div>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </template>
        <template #default v-else>
            <div class="playlist">
                <div class="item_play" v-for="item in play_list" :key="item.id">
                    <a href="#" class="faceImg_play">
                        <el-image :src="item.coverImgUrl">
                            <template #placeholder>
                                <div class="image-slot">
                                    <i class="iconfont icon-placeholder"></i>
                                </div>
                            </template>
                        </el-image>
                        <span class="playCount"><i class="iconfont icon-playnum"></i><em>{{
                                $utils.formartNum(item.playCount)
                                }}</em> / {{ item.trackCount + '首' }}</span>
                    </a>
                    <div class="info">
                        <span style="-webkit-line-clamp: 1;" class="info_name">{{ item.name }}</span>
                        <div class="tags">
                            <a style="text-decoration:none;" href="#" v-for="(tag, index) in item.tags" :key="index"
                                class="tag">#{{ tag }}</a>
                        </div>
                    </div>
                </div>
            </div>
        </template>
    </el-skeleton>
</template>

<script>
import { hotList, playList } from '@apis/http'
import { ElNotification } from 'element-plus'

export default {
    data() {
        return {
            playList: [],
            activeName: '',//默认打开第一个标签
            tagList: [],
            loading: '',
        };
    },
    props: {
        num: Number,
        is_true: Boolean,
        play_list: Array,
    },
    methods: {
        handleClick(tab, event) {
            //获取tabs切换时的name
            let beforeTabId = event.target.getAttribute('id');
            let name = beforeTabId.split('-')[1];
            // console.log(name);
            playList({
                limit: this.num,
                cat: name
            }).then(res => {
                // console.log(JSON.stringify(res));
                if (res.code === 200) {
                    this.playList = res.playlists
                } else {
                    ElNotification({
                        type: 'error',
                        title: '提示',
                        message: '接口请求错误，请查看playList()接口',
                    })
                }
            })
        },
    },
    created: function () {
        if (this.is_true) {
            hotList().then(res => {
                // console.log(JSON.stringify(res));
                if (res.code === 200) {
                    this.loading = false
                    this.tagList = res.tags
                    //默认打开第一个标签
                    this.activeName = res.tags[0].name
                    //默认打开第一个标签加载内容
                    playList({
                        limit: this.num,
                        cat: res.tags[0].name
                    }).then(res => {
                        // console.log(JSON.stringify(res));
                        if (res.code === 200) {
                            this.playList = res.playlists
                        } else {
                            ElNotification({
                                type: 'error',
                                title: '提示',
                                message: '接口请求错误，请查看playList()接口',
                            })
                        }
                    }).catch(res => {
                        // console.log(JSON.stringify(res));
                        ElNotification({
                            type: 'error',
                            duration: 0,
                            title: '提示',
                            message: res.message + ",url=" + res.config.url,
                        })
                    })
                } else {
                    ElNotification({
                        type: 'error',
                        title: '提示',
                        message: '接口请求错误，请查看hotList()接口',
                    })
                }
            }).catch(res => {
                // ElNotification({
                //     type: 'error',
                //     duration: 0,
                //     title: '提示',
                //     message: res.message + ",url=" + res.config.url,
                // })
                this.activeName = "华语"
                this.tagList = [{ "playlistTag": { "id": 5001, "name": "华语", "category": 0, "usedCount": 8362463, "type": 0, "position": 1, "createTime": 1378707544870, "highQuality": 1, "highQualityPos": 1, "officialPos": 1 }, "activity": false, "usedCount": 8362463, "createTime": 1378707544870, "hot": true, "position": 1, "category": 0, "name": "华语", "id": 5001, "type": 1 }, { "playlistTag": { "id": 1, "name": "流行", "category": 1, "usedCount": 7883233, "type": 0, "position": 2, "createTime": 1378707567870, "highQuality": 1, "highQualityPos": 18, "officialPos": 1 }, "activity": false, "usedCount": 7883233, "createTime": 1378707567870, "hot": true, "position": 2, "category": 1, "name": "流行", "id": 1, "type": 1 }, { "playlistTag": { "id": 2, "name": "摇滚", "category": 1, "usedCount": 2799506, "type": 0, "position": 3, "createTime": 1378707568870, "highQuality": 1, "highQualityPos": 20, "officialPos": 2 }, "activity": false, "usedCount": 2799506, "createTime": 1378707568870, "hot": true, "position": 3, "category": 1, "name": "摇滚", "id": 2, "type": 1 }, { "playlistTag": { "id": 1001, "name": "民谣", "category": 1, "usedCount": 2932531, "type": 0, "position": 4, "createTime": 1378707569870, "highQuality": 1, "highQualityPos": 24, "officialPos": 3 }, "activity": false, "usedCount": 2932531, "createTime": 1378707569870, "hot": true, "position": 4, "category": 1, "name": "民谣", "id": 1001, "type": 1 }, { "playlistTag": { "id": 2004, "name": "电子", "category": 1, "usedCount": 3936637, "type": 0, "position": 5, "createTime": 1378707570870, "highQuality": 1, "highQualityPos": 38, "officialPos": 4 }, "activity": false, "usedCount": 3936637, "createTime": 1378707570870, "hot": true, "position": 5, "category": 1, "name": "电子", "id": 2004, "type": 1 }, { "playlistTag": { "id": 10001, "name": "另类/独立", "category": 1, "usedCount": 1915566, "type": 0, "position": 6, "createTime": 1387441492331, "highQuality": 1, "highQualityPos": 6, "officialPos": 20 }, "activity": false, "usedCount": 1915566, "createTime": 1387441492331, "hot": true, "position": 6, "category": 1, "name": "另类/独立", "id": 10001, "type": 1 }, { "playlistTag": { "id": 2008, "name": "轻音乐", "category": 1, "usedCount": 3553109, "type": 0, "position": 7, "createTime": 1378707572870, "highQuality": 1, "highQualityPos": 37, "officialPos": 7 }, "activity": false, "usedCount": 3553109, "createTime": 1378707572870, "hot": true, "position": 7, "category": 1, "name": "轻音乐", "id": 2008, "type": 1 }, { "playlistTag": { "id": 4099180, "name": "综艺", "category": 4, "usedCount": 18690, "type": 0, "position": 8, "createTime": 1586400155889, "highQuality": 0, "highQualityPos": 0, "officialPos": 0 }, "activity": false, "usedCount": 18690, "createTime": 1586400155889, "hot": true, "position": 8, "category": 4, "name": "综艺", "id": 4099180, "type": 1 }, { "playlistTag": { "id": 9001, "name": "影视原声", "category": 4, "usedCount": 2058945, "type": 0, "position": 9, "createTime": 1378707598870, "highQuality": 1, "highQualityPos": 17, "officialPos": 1 }, "activity": false, "usedCount": 2058945, "createTime": 1378707598870, "hot": true, "position": 9, "category": 4, "name": "影视原声", "id": 9001, "type": 1 }, { "playlistTag": { "id": 11002, "name": "ACG", "category": 4, "usedCount": 2283474, "type": 0, "position": 10, "createTime": 1387779676260, "highQuality": 1, "highQualityPos": 15, "officialPos": 2 }, "activity": false, "usedCount": 2283474, "createTime": 1387779676260, "hot": true, "position": 10, "category": 4, "name": "ACG", "id": 11002, "type": 1 }];

                this.playList = [{ "name": "[阴天快乐] 如果情绪有天气 我陷在阴天里", "id": 7050074027, "trackNumberUpdateTime": 1663452000000, "status": 0, "userId": 1463586082, "createTime": 1636017006905, "updateTime": 0, "subscribedCount": 75115, "trackCount": 30, "cloudTrackCount": 0, "coverImgUrl": "http://p2.music.126.net/WTCphsIlwcFvwtZLrgyaMg==/109951166586744659.jpg", "coverImgId": 109951166586744660, "description": "光线暗下来的黄昏\n即将消失的傍晚\n你的身影出现在和弦切换的眨眼之间\n\n餐厅里熟悉的座位\n一起挤过的拥挤车厢\n你的笑声回荡在词曲交织的呢喃里\n\n记忆中的画面日渐模糊\n回忆中的甜蜜越发苦涩\n人群吞没所有情绪\n当歌声响起\n是疗愈你心放下过往，\n还是伤你至深越发沉沦？", "tags": ["伤感", "流行", "华语"], "playCount": 16940970, "trackUpdateTime": 1663513788285, "specialType": 100, "totalDuration": 0, "creator": { "defaultAvatar": false, "province": 330000, "authStatus": 1, "followed": false, "avatarUrl": "http://p1.music.126.net/eHeoKe-NWVBMM8S3DCJfog==/109951163951118282.jpg", "accountStatus": 0, "gender": 0, "city": 330100, "birthday": 1551456000000, "userId": 1463586082, "userType": 10, "nickname": "云音乐官方歌单", "signature": "点击关注，一手掌握最新上线官方歌单！（有对官方歌单建议反馈欢迎私信）", "description": "网易云音乐官方歌单", "detailDescription": "网易云音乐官方歌单", "avatarImgId": 109951163951118290, "backgroundImgId": 109951165404950140, "backgroundUrl": "http://p1.music.126.net/chlOFsm3eMrJGc4b9am18A==/109951165404950147.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 11, "remarkName": null, "authenticationTypes": 2048, "avatarDetail": { "userType": 10, "identityLevel": 1, "identityIconUrl": "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png" }, "avatarImgIdStr": "109951163951118282", "backgroundImgIdStr": "109951165404950147", "anchor": false, "avatarImgId_str": "109951163951118282" }, "tracks": null, "subscribers": [{ "defaultAvatar": false, "province": 440000, "authStatus": 0, "followed": false, "avatarUrl": "http://p1.music.126.net/4SGLtzdNn7so2DRoNcE1ZQ==/109951167880834987.jpg", "accountStatus": 0, "gender": 0, "city": 441900, "birthday": 1135526400000, "userId": 1674888016, "userType": 0, "nickname": "emo霖--Mix", "signature": "", "description": "", "detailDescription": "", "avatarImgId": 109951167880834990, "backgroundImgId": 109951166522462960, "backgroundUrl": "http://p1.music.126.net/gWSk7PC6cuE4Eb7nqSrdBw==/109951166522462965.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 11, "remarkName": null, "authenticationTypes": 0, "avatarDetail": null, "avatarImgIdStr": "109951167880834987", "backgroundImgIdStr": "109951166522462965", "anchor": false, "avatarImgId_str": "109951167880834987" }], "subscribed": false, "commentThreadId": "A_PL_0_7050074027", "newImported": false, "adType": 0, "highQuality": false, "privacy": 0, "ordered": false, "anonimous": false, "coverStatus": 0, "recommendInfo": null, "shareCount": 616, "coverImgId_str": "109951166586744659", "alg": "alg_sq_official_tagOnly", "commentCount": 203 }, { "name": "[写词高手] 中文说唱里的神来之笔", "id": 7625413468, "trackNumberUpdateTime": 1662532724046, "status": 0, "userId": 1463586082, "createTime": 1662464014061, "updateTime": 0, "subscribedCount": 686, "trackCount": 70, "cloudTrackCount": 0, "coverImgUrl": "http://p2.music.126.net/2BSFV5uQDIjTdPFmmMf1ZA==/109951167851316822.jpg", "coverImgId": 109951167851316820, "description": "用Wordplay蕴藏深义，用灵感写出Punchline，中文说唱存在的意义在于把所见所听化为所想所做，用坚定有力的歌词，表达我们的态度，让更多人感受到中文说唱的力量。", "tags": ["华语", "说唱"], "playCount": 156457, "trackUpdateTime": 1663513788285, "specialType": 100, "totalDuration": 0, "creator": { "defaultAvatar": false, "province": 330000, "authStatus": 1, "followed": false, "avatarUrl": "http://p1.music.126.net/eHeoKe-NWVBMM8S3DCJfog==/109951163951118282.jpg", "accountStatus": 0, "gender": 0, "city": 330100, "birthday": 1551456000000, "userId": 1463586082, "userType": 10, "nickname": "云音乐官方歌单", "signature": "点击关注，一手掌握最新上线官方歌单！（有对官方歌单建议反馈欢迎私信）", "description": "网易云音乐官方歌单", "detailDescription": "网易云音乐官方歌单", "avatarImgId": 109951163951118290, "backgroundImgId": 109951165404950140, "backgroundUrl": "http://p1.music.126.net/chlOFsm3eMrJGc4b9am18A==/109951165404950147.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 11, "remarkName": null, "authenticationTypes": 2048, "avatarDetail": { "userType": 10, "identityLevel": 1, "identityIconUrl": "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png" }, "avatarImgIdStr": "109951163951118282", "backgroundImgIdStr": "109951165404950147", "anchor": false, "avatarImgId_str": "109951163951118282" }, "tracks": null, "subscribers": [{ "defaultAvatar": false, "province": 340000, "authStatus": 0, "followed": false, "avatarUrl": "http://p1.music.126.net/UQdVTXkmaviX5FTZKMSpkA==/109951167248802315.jpg", "accountStatus": 0, "gender": 2, "city": 341000, "birthday": -2209017600000, "userId": 1975211434, "userType": 0, "nickname": "Amarantos1909", "signature": "", "description": "", "detailDescription": "", "avatarImgId": 109951167248802320, "backgroundImgId": 109951167248802350, "backgroundUrl": "http://p1.music.126.net/csbFRipSwp1CGHrAKEy6Jw==/109951167248802354.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 0, "remarkName": null, "authenticationTypes": 0, "avatarDetail": null, "avatarImgIdStr": "109951167248802315", "backgroundImgIdStr": "109951167248802354", "anchor": false, "avatarImgId_str": "109951167248802315" }], "subscribed": false, "commentThreadId": "A_PL_0_7625413468", "newImported": false, "adType": 0, "highQuality": false, "privacy": 0, "ordered": false, "anonimous": false, "coverStatus": 0, "recommendInfo": null, "shareCount": 11, "coverImgId_str": "109951167851316822", "alg": "alg_sq_official_tagOnly", "commentCount": 9 }, { "name": "[一周影视热歌] 郑秀文冯德伦献唱《世间有她》", "id": 2900343697, "trackNumberUpdateTime": 1663279200000, "status": 0, "userId": 1463586082, "createTime": 1564138837605, "updateTime": 1663233846953, "subscribedCount": 69693, "trackCount": 30, "cloudTrackCount": 0, "coverImgUrl": "http://p2.music.126.net/9Q3iu-SlnW45edxjAdWhOw==/109951167879539462.jpg", "coverImgId": 109951167879539460, "description": "时下热门影视剧OST\n每周更新，订阅一键收藏！", "tags": ["华语", "影视原声"], "playCount": 23870040, "trackUpdateTime": 1663513788285, "specialType": 100, "totalDuration": 0, "creator": { "defaultAvatar": false, "province": 330000, "authStatus": 1, "followed": false, "avatarUrl": "http://p1.music.126.net/eHeoKe-NWVBMM8S3DCJfog==/109951163951118282.jpg", "accountStatus": 0, "gender": 0, "city": 330100, "birthday": 1551456000000, "userId": 1463586082, "userType": 10, "nickname": "云音乐官方歌单", "signature": "点击关注，一手掌握最新上线官方歌单！（有对官方歌单建议反馈欢迎私信）", "description": "网易云音乐官方歌单", "detailDescription": "网易云音乐官方歌单", "avatarImgId": 109951163951118290, "backgroundImgId": 109951165404950140, "backgroundUrl": "http://p1.music.126.net/chlOFsm3eMrJGc4b9am18A==/109951165404950147.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 11, "remarkName": null, "authenticationTypes": 2048, "avatarDetail": { "userType": 10, "identityLevel": 1, "identityIconUrl": "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png" }, "avatarImgIdStr": "109951163951118282", "backgroundImgIdStr": "109951165404950147", "anchor": false, "avatarImgId_str": "109951163951118282" }, "tracks": null, "subscribers": [{ "defaultAvatar": false, "province": 1000000, "authStatus": 0, "followed": false, "avatarUrl": "http://p1.music.126.net/RfsihvW-D8wiqa8hSbD-bQ==/109951167434011543.jpg", "accountStatus": 0, "gender": 2, "city": 1001300, "birthday": 820080000000, "userId": 1474087236, "userType": 0, "nickname": "whisper玺鱼", "signature": "美好都包裹在平凡里", "description": "", "detailDescription": "", "avatarImgId": 109951167434011540, "backgroundImgId": 109951166279236260, "backgroundUrl": "http://p1.music.126.net/Vmly_thyxPuJGSNSuNjRnQ==/109951166279236258.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 10, "vipType": 11, "remarkName": null, "authenticationTypes": 4096, "avatarDetail": null, "avatarImgIdStr": "109951167434011543", "backgroundImgIdStr": "109951166279236258", "anchor": true, "avatarImgId_str": "109951167434011543" }], "subscribed": false, "commentThreadId": "A_PL_0_2900343697", "newImported": false, "adType": 0, "highQuality": false, "privacy": 0, "ordered": false, "anonimous": false, "coverStatus": 3, "recommendInfo": null, "shareCount": 1091, "coverImgId_str": "109951167879539462", "alg": "alg_sq_official_tagOnly", "commentCount": 561 }, { "name": "[快乐工作指南] 烦恼清空，快乐办公", "id": 7582775059, "trackNumberUpdateTime": 1660131891442, "status": 0, "userId": 1463586082, "createTime": 1660131847534, "updateTime": 0, "subscribedCount": 2522, "trackCount": 60, "cloudTrackCount": 0, "coverImgUrl": "http://p2.music.126.net/f1tpabx5DN_iEwsDnCEc8w==/109951167767653040.jpg", "coverImgId": 109951167767653040, "description": "生活似乎并没有一帆风顺。想对一直以来默默拼搏的你，说一声辛苦啦。休息时间记得多笑笑~", "tags": ["华语", "工作", "快乐"], "playCount": 856609, "trackUpdateTime": 1663513788285, "specialType": 100, "totalDuration": 0, "creator": { "defaultAvatar": false, "province": 330000, "authStatus": 1, "followed": false, "avatarUrl": "http://p1.music.126.net/eHeoKe-NWVBMM8S3DCJfog==/109951163951118282.jpg", "accountStatus": 0, "gender": 0, "city": 330100, "birthday": 1551456000000, "userId": 1463586082, "userType": 10, "nickname": "云音乐官方歌单", "signature": "点击关注，一手掌握最新上线官方歌单！（有对官方歌单建议反馈欢迎私信）", "description": "网易云音乐官方歌单", "detailDescription": "网易云音乐官方歌单", "avatarImgId": 109951163951118290, "backgroundImgId": 109951165404950140, "backgroundUrl": "http://p1.music.126.net/chlOFsm3eMrJGc4b9am18A==/109951165404950147.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 11, "remarkName": null, "authenticationTypes": 2048, "avatarDetail": { "userType": 10, "identityLevel": 1, "identityIconUrl": "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png" }, "avatarImgIdStr": "109951163951118282", "backgroundImgIdStr": "109951165404950147", "anchor": false, "avatarImgId_str": "109951163951118282" }, "tracks": null, "subscribers": [{ "defaultAvatar": false, "province": 500000, "authStatus": 0, "followed": false, "avatarUrl": "http://p1.music.126.net/U36HY0_AR61obQr8vODsZA==/18668607929761545.jpg", "accountStatus": 0, "gender": 2, "city": 500243, "birthday": -2209017600000, "userId": 430456200, "userType": 0, "nickname": "琈啊", "signature": "", "description": "", "detailDescription": "", "avatarImgId": 18668607929761544, "backgroundImgId": 18958878998104090, "backgroundUrl": "http://p1.music.126.net/laYRMCuaFLohsnn99hUo5g==/18958878998104089.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 0, "remarkName": null, "authenticationTypes": 0, "avatarDetail": null, "avatarImgIdStr": "18668607929761545", "backgroundImgIdStr": "18958878998104089", "anchor": false, "avatarImgId_str": "18668607929761545" }], "subscribed": false, "commentThreadId": "A_PL_0_7582775059", "newImported": false, "adType": 0, "highQuality": false, "privacy": 0, "ordered": false, "anonimous": false, "coverStatus": 0, "recommendInfo": null, "shareCount": 14, "coverImgId_str": "109951167767653040", "alg": "alg_sq_official_tagOnly", "commentCount": 19 }, { "name": "[浪漫因子] 可以邀请你和我一起去春天吗", "id": 7308142944, "trackNumberUpdateTime": 1663452000000, "status": 0, "userId": 1463586082, "createTime": 1645778480320, "updateTime": 0, "subscribedCount": 20141, "trackCount": 30, "cloudTrackCount": 0, "coverImgUrl": "http://p2.music.126.net/fvXVwDQ1SiZ2qmOIouAYnA==/109951167090873307.jpg", "coverImgId": 109951167090873310, "description": "我想在春天去见你，\n穿着漂亮的花裙子。\n和你在街边散步的时候，\n裙角就像我的心情一样，\n在微风里荡来荡去。\n那个画面好像伴随着花香，\n伴随着春天的所有浪漫气息，\n我光想想，\n就迫不及待地准备去见你。", "tags": ["华语", "浪漫", "治愈"], "playCount": 4178891, "trackUpdateTime": 1663513788285, "specialType": 100, "totalDuration": 0, "creator": { "defaultAvatar": false, "province": 330000, "authStatus": 1, "followed": false, "avatarUrl": "http://p1.music.126.net/eHeoKe-NWVBMM8S3DCJfog==/109951163951118282.jpg", "accountStatus": 0, "gender": 0, "city": 330100, "birthday": 1551456000000, "userId": 1463586082, "userType": 10, "nickname": "云音乐官方歌单", "signature": "点击关注，一手掌握最新上线官方歌单！（有对官方歌单建议反馈欢迎私信）", "description": "网易云音乐官方歌单", "detailDescription": "网易云音乐官方歌单", "avatarImgId": 109951163951118290, "backgroundImgId": 109951165404950140, "backgroundUrl": "http://p1.music.126.net/chlOFsm3eMrJGc4b9am18A==/109951165404950147.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 11, "remarkName": null, "authenticationTypes": 2048, "avatarDetail": { "userType": 10, "identityLevel": 1, "identityIconUrl": "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png" }, "avatarImgIdStr": "109951163951118282", "backgroundImgIdStr": "109951165404950147", "anchor": false, "avatarImgId_str": "109951163951118282" }, "tracks": null, "subscribers": [{ "defaultAvatar": false, "province": 110000, "authStatus": 0, "followed": false, "avatarUrl": "http://p1.music.126.net/nnOIuPteaFNSqSdTjGerVw==/109951163583175600.jpg", "accountStatus": 0, "gender": 1, "city": 110101, "birthday": -2209017600000, "userId": 1585626465, "userType": 0, "nickname": "宠辱不惊坐怀不乱", "signature": "", "description": "", "detailDescription": "", "avatarImgId": 109951163583175600, "backgroundImgId": 109951163583177090, "backgroundUrl": "http://p1.music.126.net/t3fFwqSgWfEhOfUmskMHaw==/109951163583177082.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 0, "remarkName": null, "authenticationTypes": 0, "avatarDetail": null, "avatarImgIdStr": "109951163583175600", "backgroundImgIdStr": "109951163583177082", "anchor": false, "avatarImgId_str": "109951163583175600" }], "subscribed": false, "commentThreadId": "A_PL_0_7308142944", "newImported": false, "adType": 0, "highQuality": false, "privacy": 0, "ordered": false, "anonimous": false, "coverStatus": 0, "recommendInfo": null, "shareCount": 195, "coverImgId_str": "109951167090878167", "alg": "alg_sq_official_tagOnly", "commentCount": 66 }, { "name": "[深夜归路人] 给深夜归家的你留一盏灯", "id": 7561460225, "trackNumberUpdateTime": 1658999695336, "status": 0, "userId": 1463586082, "createTime": 1658999685125, "updateTime": 0, "subscribedCount": 3257, "trackCount": 60, "cloudTrackCount": 0, "coverImgUrl": "http://p2.music.126.net/4vBjWpT9MnvKaK11tmDqpA==/109951167725086264.jpg", "coverImgId": 109951167725086270, "description": "独自在深夜里踏上归程，凝视窗外，月明星稀，晚风微凉。即便再晚，也有音乐相伴，给夜归的你留一盏灯，晚安陌生人。", "tags": ["夜晚", "华语"], "playCount": 838520, "trackUpdateTime": 1663513788285, "specialType": 100, "totalDuration": 0, "creator": { "defaultAvatar": false, "province": 330000, "authStatus": 1, "followed": false, "avatarUrl": "http://p1.music.126.net/eHeoKe-NWVBMM8S3DCJfog==/109951163951118282.jpg", "accountStatus": 0, "gender": 0, "city": 330100, "birthday": 1551456000000, "userId": 1463586082, "userType": 10, "nickname": "云音乐官方歌单", "signature": "点击关注，一手掌握最新上线官方歌单！（有对官方歌单建议反馈欢迎私信）", "description": "网易云音乐官方歌单", "detailDescription": "网易云音乐官方歌单", "avatarImgId": 109951163951118290, "backgroundImgId": 109951165404950140, "backgroundUrl": "http://p1.music.126.net/chlOFsm3eMrJGc4b9am18A==/109951165404950147.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 11, "remarkName": null, "authenticationTypes": 2048, "avatarDetail": { "userType": 10, "identityLevel": 1, "identityIconUrl": "https://p5.music.126.net/obj/wo3DlcOGw6DClTvDisK1/4788940880/1a1f/68f5/b59a/b444b81b88567108ba88194fa29144f5.png" }, "avatarImgIdStr": "109951163951118282", "backgroundImgIdStr": "109951165404950147", "anchor": false, "avatarImgId_str": "109951163951118282" }, "tracks": null, "subscribers": [{ "defaultAvatar": false, "province": 110000, "authStatus": 0, "followed": false, "avatarUrl": "http://p1.music.126.net/SUeqMM8HOIpHv9Nhl9qt9w==/109951165647004069.jpg", "accountStatus": 0, "gender": 2, "city": 110101, "birthday": -2209017600000, "userId": 1827952017, "userType": 0, "nickname": "天使的眼泪190418", "signature": "", "description": "", "detailDescription": "", "avatarImgId": 109951165647004060, "backgroundImgId": 109951162868126480, "backgroundUrl": "http://p1.music.126.net/_f8R60U9mZ42sSNvdPn2sQ==/109951162868126486.jpg", "authority": 0, "mutual": false, "expertTags": null, "experts": null, "djStatus": 0, "vipType": 0, "remarkName": null, "authenticationTypes": 0, "avatarDetail": null, "avatarImgIdStr": "109951165647004069", "backgroundImgIdStr": "109951162868126486", "anchor": false, "avatarImgId_str": "109951165647004069" }], "subscribed": false, "commentThreadId": "A_PL_0_7561460225", "newImported": false, "adType": 0, "highQuality": false, "privacy": 0, "ordered": false, "anonimous": false, "coverStatus": 0, "recommendInfo": null, "shareCount": 14, "coverImgId_str": "109951167725086264", "alg": "alg_sq_official_tagOnly", "commentCount": 13 }];
                this.loading = false;
            })
        } else {
            setTimeout(() => {
                // console.log("传递数组数量=" + this.play_list.length);
                this.loading = false;
            }, 150);

        }
    }
}
</script>
<style lang="less" scoped>
.skeleton-img {
    display: inline-block;
    width: calc(100% / 6);
    padding: 20px 40px 20px 0;
    box-sizing: border-box;
}

.playlist {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 0;
}

.item_play {
    width: calc(100% / 6);
    padding: 20px 40px 20px 0;
    box-sizing: border-box;

    .faceImg_play {
        display: block;
        position: relative;
        padding-top: 100%;
        // height: 216px;

        &::after,
        &::before {
            content: "";
            width: 100%;
            height: 100%;
            background-color: #d9d9d9;
            position: absolute;
            top: 0;
        }

        &::before {
            border: 1px solid #d6d6d6;
            right: -6px;
            -webkit-transform: scale(.85);
            -ms-transform: scale(.85);
            transform: scale(.85);
            -webkit-transform-origin: 100% 50%;
            -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
            z-index: 2;
            border-radius: 2px;
            transition: all .4s linear;
        }

        &::after {
            border: 1px solid #c4c4c4;
            right: -11px;
            -webkit-transform: scale(.73);
            -ms-transform: scale(.73);
            transform: scale(.73);
            -webkit-transform-origin: 100% 50%;
            -ms-transform-origin: 100% 50%;
            transform-origin: 100% 50%;
            z-index: 1;
            border-radius: 2px;
            opacity: .5;
            transition: all .4s linear .1s;
        }
    }

    .el-image {
        position: absolute;
        top: 0;
        width: 100%;
        height: 100%;
        z-index: 3;
        border-radius: 4px;
    }

    .playCount {
        position: absolute;
        top: 0;
        right: 0;
        z-index: 4;
        font-size: 12px;
        display: block;
        // width: 60%;
        text-align: center;
        color: #fff;
        line-height: 30px;
        padding-right: 10px;
        border-radius: 0 4px 0 0;
        /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#000000+0,000000+100&0+0,0.5+97 */
        background: -moz-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 97%, rgba(0, 0, 0, 0.5) 100%);
        /* FF3.6-15 */
        background: -webkit-linear-gradient(left, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 97%, rgba(0, 0, 0, 0.5) 100%);
        /* Chrome10-25,Safari5.1-6 */
        background: linear-gradient(to right, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.5) 97%, rgba(0, 0, 0, 0.5) 100%);
        /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
        filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#00000000', endColorstr='#80000000', GradientType=1);
        /* IE6-9 */

        .icon-playnum {
            color: #fff;
        }

        em {
            display: inline-block;
            padding-left: 5px;
            font-style: normal;
        }
    }

    &:hover {
        .faceImg_play {
            position: relative;

            &::after,
            &::before {
                background: #ff960080
            }

            &::before {
                right: -8px;
            }

            &::after {
                right: -15px;
            }
        }

        .info_name {
            color: #000;
        }
    }

    .info_name {
        display: block;
        font-size: 16px;
        line-height: 22px;
        margin-top: 15px;
        font-weight: 400;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        -webkit-box-orient: vertical;
        word-break: break-all;
    }

    .tags {
        padding: 5px 0;

        .tag {
            padding-right: 5px;
            font-size: 12px;
            color: #ff641e;
        }
    }
}

// 歌单封面图的宽度
@w: calc(100% / 6 - 40px);

.el-skeleton {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    font-size: 0;

    .ske-img {
        height: 242px;
        line-height: @w;
    }

    .ske-info {
        padding-top: 15px;
    }

    .ske-name {
        line-height: 16px;
        margin: 3px 0;
    }

    .ske-tags {
        display: flex;
        padding: 5px 0;

        * {
            width: 10%;
            margin-right: 10px;
        }
    }
}
</style>